<template>
  <div class="vrGame">
    <div class="second-btn">
      二级菜单
    </div>
    <div class="vr-list">
      <div v-for="item in list" :key="item.id" class="vr-box" :class="{'active': item.id === active}">
        <div class="img-box">
          <img src="http://www.placehold.it/318x175" class="vr-img">
        </div>
        <div class="title">
          《{{item.title}}》
          <sub>简介</sub>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { vrList } from '@/consts/mock'
export default {
  data() {
    return {
      list: vrList,
      active: 7
    }
  },
}
</script>

<style lang="stylus">
.vrGame {
  .second-btn {
    margin: getPx(31) 0 getPx(20) getPx(60);
    width: getPx(122);
    height: getPx(31);
    font-size: $base-font-size;
    color: $white;
    background: $primary;
    border-radius: 5px;
    cursor: pointer;
    flexMiddle(center);
  }
  .vr-list {
    .vr-box {
      width: getPx(346);
      height: getPx(230);
      float: left;
      margin: 0 getPx(19) getPx(21) 0;
      background: $white;
      &.active {
        box-shadow 0 0 getPx(5) getPx(5) $box-bg;
      }
      .img-box {
        width: getPx(318);
        height: getPx(175);
        margin: getPx(14);
        .vr-img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        font-size: $sec-font-size;
        sub {
          font-size: $sub-font-size;
        }
      }
    }  
  }
}
</style>